<script setup lang="ts">
import { ref } from 'vue'
import { fileApi } from '@/api/modules/file'
import type { IFileInfo } from '@/types/file'
import type { IFileQueryParams } from '@/api/modules/file'

const loading = ref(false)
const fileList = ref<IFileInfo[]>([])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: (total: number) => `共 ${total} 条记录`,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '30', '50'],
  // 自定义页码选项的文本
  buildOptionText: (opt: { value: number }) => {
    return `${opt.value} 条/页`
  }
})

// 查询参数
const queryParams = ref<IFileQueryParams>({
  fileName: '',
  status: undefined,
  startTime: '',
  endTime: ''
})

const fetchFileList = async () => {
  loading.value = true
  try {
    const result = await fileApi.getFileList({
      page: pagination.value.current - 1,
      size: pagination.value.pageSize,
      ...queryParams.value
    })
    fileList.value = result.data.content
    pagination.value = {
      ...pagination.value,
      current: result.data.pageable.pageNumber + 1,
      pageSize: result.data.pageable.pageSize
    }
  } catch (error) {
    console.error('获取文件列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理查询
const handleSearch = () => {
  pagination.value.current = 1 // 重置到第一页
  fetchFileList()
}

// 处理分页变化
const handleTableChange = (pag: any) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  fetchFileList()
}

// 初始加载
fetchFileList()
</script>

<template>
  <div class="file-review">
    <!-- 查询表单 -->
    <a-form layout="inline" class="search-form">
      <a-form-item label="文件名">
        <a-input v-model:value="queryParams.fileName" placeholder="请输入文件名" />
      </a-form-item>
      <a-form-item label="状态">
        <a-select v-model:value="queryParams.status" placeholder="请选择状态">
          <a-select-option :value="undefined">全部</a-select-option>
          <a-select-option :value="1">待审核</a-select-option>
          <a-select-option :value="2">已通过</a-select-option>
          <a-select-option :value="3">已退回</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch">查询</a-button>
      </a-form-item>
    </a-form>

    <!-- 文件列表 -->
    <a-table
      :loading="loading"
      :data-source="fileList"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!-- 表格列配置 -->
    </a-table>
  </div>
</template>

<style lang="less" scoped>
.file-review {
  padding: 24px;
  
  .search-form {
    margin-bottom: 24px;
  }
}
</style> 